/*
 * 可复用的公有布局
 */

//  导航的公共样式
body {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .navbox {
        width: 100%;
        height: 10%;
        background-color: #ffffff;
        ul {
            display: flex;
            justify-content: space-between;
            padding-top: 4px;

            li {
                width: 15%;
                text-align: center;
                

                #publick-a {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                    color: #7a7a7a;

                    span.fs30px {
                        font-size: 28px;
                    }

                    .navtxt {
                        font-size: 12px;
                    }
                }

                #publick-a.navcolor {
                    color: #39c098;
                }
            }
        }
    }
}

.head{
    border-bottom: 1px solid #ddd;
    li{
        width: 84px;
        line-height: 50px;
        text-align: center;
        position: relative;
        a{
            color: #9a9a99;
            font-size: 16px;
        }
        span{
            display: block;
            width: 55px;
            height: 2px;
            background-color: rgb(82, 173, 142);
            position: absolute;
            bottom: 0;
            left: 14px;
            visibility: hidden;
          
        }
        &.active a{
            color: rgb(82, 173, 142);
            font-size: 20px;
        }
        &.active span{
            visibility: visible;
        }
    }
}
